<template>
  <view class="rectangle-container">
    <view class="left-text">{{data.name}}</view>
    <view class="right-text">{{data.begin}} --> {{data.end}}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { defineProps } from 'vue';
defineProps({
	data:{
		type:Object,
		default(){
			return {
				id:0,
				name: "事件名称",
				begin: "2024-11-29",
				end: "2024-11-29",
			}
		},
	},
})
// 定义事件名称
const eventName = ref('这是一个示例事件');
</script>

<style scoped>
.rectangle-container {
  display: flex;
  width: 100%;
  height: 80rpx;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx;
  background-color: #f6f6f6; /* 灰色 */;
  border-radius:0;
  border-bottom: #717171 solid 1rpx;
  box-sizing: border-box;
  padding-bottom: 3rpx;
}

.left-text {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

.right-text {
  flex: 2;
  font-size: 28rpx;
  color: #f6f6f6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>